<template>
  <div class="home">
    <mt-swipe :auto="4000">
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner1.png" alt>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner2.png" alt>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner3.png" alt>
        </router-link>
      </mt-swipe-item>
      <mt-swipe-item>
        <router-link to>
          <img src="../assets/images/banner4.png" alt>
        </router-link>
      </mt-swipe-item>
    </mt-swipe>

    <ul class="nav clearfix">
      <li>
        <router-link to>
          <img src="../assets/images/nav1.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav2.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav3.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav4.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav5.png" alt>
        </router-link>
      </li>
      <li>
        <router-link to>
          <img src="../assets/images/nav2.png" alt>
        </router-link>
      </li>
    </ul>
    <div class="product clearfix" >
      <router-link to class="pro-box">
        <img src="../assets/images/product.jpg" alt>
        <div
          class="pro-text"
        >大码女靴头层牛皮羊毛靴皮毛一体加厚保暖防滑雪地靴中筒冬靴 冬季2018新款靓饰纽扣 316侧拉链全皮+羊皮毛一体 37欧曼朵2018冬季新款真皮中跟高筒靴女不过膝长靴子皮靴加绒马丁靴女士中筒靴粗跟长筒靴 黑色(绒里) 37码</div>
        <div class="pro-price">
          <span class="new-price">￥200</span>
          <span class="old-price">￥300</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="pro-box">
        <img src="../assets/images/product.jpg" alt>
        <div
          class="pro-text"
        >大码女靴头层牛皮羊毛靴皮毛一体加厚保暖防滑雪地靴中筒冬靴 冬季2018新款靓饰纽扣 316侧拉链全皮+羊皮毛一体 37欧曼朵2018冬季新款真皮中跟高筒靴女不过膝长靴子皮靴加绒马丁靴女士中筒靴粗跟长筒靴 黑色(绒里) 37码</div>
        <div class="pro-price">
          <span class="new-price">￥200</span>
          <span class="old-price">￥300</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="pro-box">
        <img src="../assets/images/product.jpg" alt>
        <div
          class="pro-text"
        >大码女靴头层牛皮羊毛靴皮毛一体加厚保暖防滑雪地靴中筒冬靴 冬季2018新款靓饰纽扣 316侧拉链全皮+羊皮毛一体 37欧曼朵2018冬季新款真皮中跟高筒靴女不过膝长靴子皮靴加绒马丁靴女士中筒靴粗跟长筒靴 黑色(绒里) 37码</div>
        <div class="pro-price">
          <span class="new-price">￥200</span>
          <span class="old-price">￥300</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="pro-box">
        <img src="../assets/images/product.jpg" alt>
        <div
          class="pro-text"
        >大码女靴头层牛皮羊毛靴皮毛一体加厚保暖防滑雪地靴中筒冬靴 冬季2018新款靓饰纽扣 316侧拉链全皮+羊皮毛一体 37欧曼朵2018冬季新款真皮中跟高筒靴女不过膝长靴子皮靴加绒马丁靴女士中筒靴粗跟长筒靴 黑色(绒里) 37码</div>
        <div class="pro-price">
          <span class="new-price">￥200</span>
          <span class="old-price">￥300</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="pro-box">
        <img src="../assets/images/product.jpg" alt>
        <div
          class="pro-text"
        >大码女靴头层牛皮羊毛靴皮毛一体加厚保暖防滑雪地靴中筒冬靴 冬季2018新款靓饰纽扣 316侧拉链全皮+羊皮毛一体 37欧曼朵2018冬季新款真皮中跟高筒靴女不过膝长靴子皮靴加绒马丁靴女士中筒靴粗跟长筒靴 黑色(绒里) 37码</div>
        <div class="pro-price">
          <span class="new-price">￥200</span>
          <span class="old-price">￥300</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
      <router-link to class="pro-box">
        <img src="../assets/images/product.jpg" alt>
        <div
          class="pro-text"
        >大码女靴头层牛皮羊毛靴皮毛一体加厚保暖防滑雪地靴中筒冬靴 冬季2018新款靓饰纽扣 316侧拉链全皮+羊皮毛一体 37欧曼朵2018冬季新款真皮中跟高筒靴女不过膝长靴子皮靴加绒马丁靴女士中筒靴粗跟长筒靴 黑色(绒里) 37码</div>
        <div class="pro-price">
          <span class="new-price">￥200</span>
          <span class="old-price">￥300</span>
        </div>
        <mt-button type="primary">立即购买</mt-button>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.home {
  overflow: scroll;
}
.mint-swipe {
  height: 230px;
  img {
    height: 100%;
    width: 100%;
    display: block;
  }
}
.nav {
  padding: 10px;
  > li {
    float: left;
    width: 33.33%;
    img {
      width: 100%;
    }
  }
}
.product {
  padding: 0 10px 80px;
  .pro-box{
    float: left;
    width: 49%;
    padding-bottom: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 2px 0px #ddd;
   text-decoration: none;
    img{
      width: 100%;
      display: block;
    }
    .pro-text{
      color: #666;
      font-size: 13px;
      padding: 0px 5px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .pro-price{
    text-align: center;
    padding: 10px 0;
      >.new-price{
        font-size: 13px;
        color: red;
        font-weight: 600
      }
      >.old-price{
        font-size: 13px;
        color:#666;
        text-decoration: line-through;
        margin-left: 10px;
      }
    }
    .mint-button {
      display: block;
      margin: 0 auto;
      font-size: 15px;
      height: auto;
      padding: 5px 15px;
    }
     
  }
  .pro-box:nth-of-type(even){
     margin-left: 2%;
  }
}
</style>


